<template>
	<view>
		<u-tabbar :value="value" :placeholder="false" :activeColor="$u.color.color" @change="page">
			<template v-for="(item,index) in tabbarData">
				<u-tabbar-item :text="item.text" :badge="item.badge" :badgeStyle="{'backgroundColor':$u.color.color}">
					<image class="icon" slot="active-icon"
						:src="item.icon1"></image>
					<image class="icon" slot="inactive-icon"
						:src="item.icon"></image>
				</u-tabbar-item>
			</template>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		messageCount
	} from '@/common/api.js'
	export default {
		name: "tabber1",
		props: {
			value: {
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {
			}
		},
		watch: {
			value: {
				immediate: true,
				// deep:true,
				handler() {
					// this.$store.dispatch('getMessageCount')
				}
			}
		},
		computed: {
			...mapState(["$userInfo", "isLogin", "systemInfo", "imgData", "badge"]),
			tabbarData() {
				return [{
						'text': '首页',
						'icon': '/static/img/tab1.png',
						'icon1': '//static/img/tab1.png',
						'page': "/pages/home/home"
					},
					{
						'text': '个人中心',
						'icon': '/static/img/tab1.png',
						'icon1': '//static/img/tab1.png',
						'page': "/pages/home/mine"
					}
				]
			}
		},
		methods: {
			page(e) {
				let url = this.tabbarData[e].page
				console.log('urlurl',url);
	
				uni.redirectTo({
					url
				})
			}
		},
	}
</script>

<style>
	.icon {
		width: 35rpx;
		height: 35rpx;
	}
</style>